<template>
    <div class="Header_Border">
        <el-button @click="emit('ChangeAside')" :icon="Menu" class="Header_Menu"></el-button>
        <div class="Header_UserFun">
            <p class="Header_UserName">你好, <span>{{ USERNAME }}</span></p>
            <el-button @click="quit" type="danger" class="Header_UserQuit el_button_danger" :icon="SwitchButton"></el-button>
        </div>
    </div>
</template>

<script setup lang='js' name=''>
import { Menu, SwitchButton } from "@element-plus/icons-vue";
import router from "@/router";
import { inject } from "vue";
const USERNAME = inject("UserName")
const emit = defineEmits(['ChangeAside'])
function quit(){
    localStorage.removeItem("SLZKLoginFlag")
    localStorage.removeItem("SLZKName")
    localStorage.removeItem("SLZKUserID")
    router.push("/login")
}
</script>

<style scoped>
.Header_Border {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.Header_Menu {
    margin-left: 10px;
    padding: 15px;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background: none;
    color: var(--Header_MenuColor);
    transition: all 0.5s;
}

.Header_UserFun {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-right: 10px;
}

.Header_UserName {
    color: var(--Header_UserName);
    font-size: 20px;
    transition: all 0.5s;
}

.Header_UserName>span {
    font-weight: bold;
}

.Header_UserQuit {
    padding: 15px;
    width: 20px;
    height: 20px;
    font-size: 20px;
}
</style>